<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet"  href="/layui/css/layui.css"/>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>用户列表</title>
</head>
<body>
<script src="/plugins/jquery/jquery-1.10.2.min.js"></script>
<script  src="/layui/layui.js"></script>
<script src="/plugins/js/common.js"></script>
<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">用户信息</li>
    <li>家庭信息</li>
    <li>产品详情</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
		    <form class="layui-form" id="saveForm">
			<br>
			  <div class="layui-form-item">
				    <div class="layui-inline">
				      <label class="layui-form-label">登录名：</label>
				      <div class="layui-input-inline">
			        	<div class="layui-form-mid layui-word-aux" th:text="${appUserInfo.loginName}">
			       	 	</div>
				    </div>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">真实姓名：</label>
				     <div class="layui-input-inline">
			        	<div class="layui-form-mid layui-word-aux" th:text="${appUserInfo.realName}">
			       	 	</div>
				    </div>
				  </div>
			  </div>
			  <div class="layui-form-item">
				   <div class="layui-inline">
				      <label class="layui-form-label">身份证号：</label>
				     <div class="layui-input-inline">
			        	<div class="layui-form-mid layui-word-aux" th:text="${appUserInfo.idCode}">
			       	 	</div>
				    </div>
				  </div>
				  <div class="layui-inline">
				      <label class="layui-form-label">手机号：</label>
				     <div class="layui-input-inline">
			        	<div class="layui-form-mid layui-word-aux" th:text="${appUserInfo.mobile}">
			       	 	</div>
				    </div>
				  </div>
			  </div>
			  <div class="layui-form-item">
				 <div class="layui-inline">
			      <label class="layui-form-label">所属区域：</label>
			      <div class="layui-input-inline">
			        <div class="layui-form-mid layui-word-aux" th:text="${appUserInfo.areaName}">
			       	 </div>
			      </div>
			    </div>
			     <div class="layui-inline">
				      <label class="layui-form-label">详细地址：</label>
				     <div class="layui-input-inline">
			        	<div class="layui-form-mid layui-word-aux" th:text="${appUserInfo.address}">
			       	 	</div>
				    </div>
				  </div>
			  </div>
		   <div class="layui-form-item">
			   <div class="layui-inline">
				      <label class="layui-form-label">用户类型：</label>
				     <div class="layui-input-inline">
			        <div th:switch="${appUserInfo.appUserType}" class="layui-form-mid layui-word-aux">
			            <p th:case="1">普通用户</p>
						<p th:case="2">VIP会员</p>
						<p th:case="3">地市推广代理</p>
					</div>
				    </div>
				  </div>
				  <div class="layui-inline">
				      <label class="layui-form-label">交纳会费：</label>
				     <div class="layui-input-inline">
			        	<div class="layui-form-mid layui-word-aux" th:text="${appUserInfo.membershipFee}">
			       	 	</div>
				    </div>
				  </div>
			 </div>
			 <div class="layui-form-item">
				  <div class="layui-inline">
				      <label class="layui-form-label">邀请码：</label>
				     <div class="layui-input-inline">
			        	<div class="layui-form-mid layui-word-aux" th:text="${appUserInfo.invitationCode}">
			       	 	</div>
				    </div>
				  </div>
			 </div>
		</form>
    </div>
    <div class="layui-tab-item">
    	<table class="layui-hide" id="familyList"  lay-filter="familyList"></table>
    </div>
    <div class="layui-tab-item">
    	<table class="layui-hide" id="appUserInfoProductList"  lay-filter="appUserInfoProductList"></table>
    </div>
  </div>
</div>  
<script type="text/javascript" th:inline="javascript">
var table;
var layer;
layui.use(['form','table'], function(){
	layer=layui.layer;
	  table = layui.table;
	  tableIns = initFamilyListTable(table);
	  tableIns = initAppUserInfoProductTable(table);
});

layui.use('element', function(){
    var element = layui.element;
    var $ = layui.jquery;
    // 一些事件监听
    element.on('tab(tab-card-title)', function(data){
        $(".layui-tab-item").each(function () {
           $(this).removeClass('layui-show');
        });
        $(".tag-item-"+data.index).removeClass('layui-show').addClass('layui-show');
    });
});

function initFamilyListTable(){
	table.render({
	    elem: '#familyList',
	    url:'/appUser/familyListData?appUserId='+[[${appUserInfo.id}]],
	    cellMinWidth: 30,
	    cols:[
		    	[
			      {field:'name'  ,title: '姓名'},
			      {field:'idCode', title: '身份证号'},
			      {field:'relationShip',  title: '与本人关系',templet:function(value){
			    	  //1:父亲 2:母亲 3:妻子 4:儿子 5:女儿 6:其他
			    	  if(value.relationShip==1){
			    		  return "父亲";
			    	  }else if(value.relationShip==2){
			    		  return "母亲";
			    	  }else if(value.relationShip==3){
			    		  return "妻子";
			    	  }else if(value.relationShip==4){
			    		  return "儿子";
			    	  }else{
			    		  return "其他";
			    	  }
			      	}
			      },
			      {field:'createDate',  title: '添加时间',sort : true,fixed:false,templet:'<div>{{ formatDate(d.createDate)}}</div>'}
		    	]
	    	],
	    id: 'reloadFamilyTable'
	  });
}

function initAppUserInfoProductTable(){
	table.render({
	    elem: '#appUserInfoProductList',
	    url:'/appUser/appUserProductListData?appUserId='+[[${appUserInfo.id}]],
	    cellMinWidth: 30,
	    cols:[
		    	[
			      {field:'applyPeopleName'  ,title: '参与人'},
			      {field:'idCode', title: '身份证号'},
			      {field:'productName',  title: '加入产品'},
			      {field:'applyDate',  title: '加入日期',sort : true,fixed:false,templet:'<div>{{ formatDate(d.applyDate)}}</div>'}
		    	]
	    	],
	    id: 'reloadAppUserInfoProductTable'
	  });
}
	
</script>
</body>
</html>